<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">收到点赞</block>
		</cu-custom>
		<scroll-view croll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''"
					v-for="(item,index) in navItems" :key="index" @tap="tabSelect" :data-id="index">
					{{item}}
					<view v-if="index==1&&unreadPostPraiseCount>0" class="cu-tag bg-red round sm">{{unreadPostPraiseCount}}</view>
					<view v-if="index==2&&unreadActivePraiseCount>0" class="cu-tag bg-red round sm">{{unreadActivePraiseCount}}</view>
				</view>
			</view>
		</scroll-view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view v-for="(item,index) in dataList" :key="index">
				<view v-if="TabCur==0" class="bg-white radius shadow-blur margin">
					<view class="cu-item">
						<view class="flex justify-between align-start solid-bottom" style="width: 100%;">
							<view
								class="flex justify-start align-start padding-left padding-right padding-top-sm padding-bottom-sm">
								<view @tap="jumpToProfile(item.user_id)" class="cu-avatar round"
									:style="'background-image: url('+item.author.avatar+');'"></view>
								<view class="flex justify-start align-start padding-left-sm"
									style="flex-direction: column;">
									<text @tap="jumpToProfile(item.user_id)"
										class="text-grey">{{item.author.nickname}}</text>
									<text class="text-gray text-sm">{{item.show_time}}</text>
								</view>
								<text class="text-df padding-left">觉得你的评论很赞！</text>
							</view>
							<view v-if="item.owner_read_status==0" class="padding-right padding-top">
								<view class="cu-tag line-green radius sm">新</view>
							</view>
						</view>
						<view v-if="item.comment" @click="jumpToDetail(item.comment_id)"
							class="flex justify-between align-center padding-left padding-right padding-top-sm padding-bottom-sm"
							style="width: 100%;">
							<view class="flex justify-start align-start" style="flex-direction: column;">
								<text v-if="item.post && item.post.title && item.post.post_id"
									@click.stop="jumpToPost(item.post.post_id)" class="text-bold text-lg text-black">
									帖子:《{{item.post.title}}》</text>
								<text v-else class="text-grey"> 帖子已被作者删除 </text>
								<view style="height: 8upx;"></view>
								<text v-if="item.comment.content && item.comment.content.length > 0"
									class="text-df">您的评论: “ {{item.comment.content}} ”</text>
								<text v-else class="text-df">您发表的图片评论: </text>
								<view
									v-if="item.comment.audit_status !==-1 && item.comment.image_list && item.comment.image_list.length>0"
									style="width: 100%;"
									:class="'padding-top-'+[item.comment.content&&item.comment.content.length>0?'xs':'sm']">
									<view :style="'max-width:'+(item.comment.image_list.length>2?'80%;':'50%;')"
										:class="'grid flex-sub grid-square col-'+item.comment.image_list.length">
										<view class="bg-img" v-for="(url,index) in item.comment.image_list" :key="index"
											@tap="ViewImage" :data-list="item.comment.image_list" :data-url="url">
											<image :src="url+'?imageView2/2/w/500/h/500/q/75'" mode="aspectFill">
											</image>
										</view>
									</view>
								</view>
							</view>
							<text class="text-grey cuIcon-right"></text>
						</view>
						<view v-else class="flex justify-start align-center padding-left padding-right padding-top-sm">
							<text class="text-df text-grey">您已经删除的评论</text>
						</view>
					</view>
				</view>
				<view v-if="TabCur==1" class="bg-white radius shadow-blur margin">
					<view class="cu-item">
						<view class="flex justify-start align-start" style="flex-direction: column;width: 100%;">
							<view class="flex justify-between align-start solid-bottom padding-right" style="width: 100%;">
								<view
									class="flex justify-start align-start padding-left padding-right padding-top-sm padding-bottom-sm">
									<view @tap="jumpToProfile(item.user_id)" class="cu-avatar round"
										:style="'background-image: url('+item.author.avatar+');'"></view>
									<view class="flex justify-start align-start padding-left-sm"
										style="flex-direction: column;">
										<text @tap="jumpToProfile(item.user_id)"
											class="text-grey">{{item.author.nickname}}</text>
										<text class="text-gray text-sm">{{item.show_time}}</text>
									</view>
									<text class="text-df padding-left">觉得你的帖子很赞！</text>
								</view>
								<view v-if="item.owner_read_status==0"  class="padding-right padding-top">
									<view class="cu-tag line-green radius sm">新</view>
								</view>
							</view>
							<view class="flex justify-between align-center padding-left padding-right padding-top-sm padding-bottom-sm"
								style="width: 100%;">
								<text v-if="item.post && item.post.title && item.post.post_id"
									@click.stop="jumpToPost(item.post.post_id)" class="text-bold text-lg text-black">
									帖子:《{{item.post.title}}》</text>
								<text v-else class="text-grey"> 帖子已被作者删除 </text>
								<text v-if="item.post && item.post.title && item.post.post_id" class="text-grey cuIcon-right padding-right"></text>
							</view>
						</view>
					</view>
				</view>
				<view @tap="jumpToActiveDetail(item.post_id)" v-if="TabCur==2" class="bg-white radius shadow-blur margin">
					<view class="flex justify-between align-center padding">
						<view class="flex justify-start align-center">
							<image :src="item.author.avatar" style="width: 80upx;height: 80upx;"></image>
							<view class="flex justify-start align-start padding-left" style="flex-direction: column;">
								<view class="flex justify-start align-center">
									<text class="text-bold text-df">{{item.author.nickname}}</text>
									<text class="text-grey padding-left-sm">点赞了你的动态</text>
								</view>
								<text class="text-gray">{{item.show_time}}</text>
							</view>
						</view>
						<view class="flex justify-end align-center">
							<view v-if="item.owner_read_status==0" class="padding-right">
								<view class="cu-tag line-green radius sm">新</view>
							</view>
							<text class="cuIcon-right text-grey"></text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		getTimeDistance
	} from '@/api/utils.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		getCommentPraiseList,
		markCommentPraiseRead,
		getPostPraiseList,
		markPostPraiseRead,
		getActivePraiseList
	} from '@/api/api.js';
	import config from '@/api/config.js'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				unreadActivePraiseCount:0,
				unreadPostPraiseCount:0,
				scrollLeft: 0,
				navItems: [
					'评论被赞',
					'帖子被赞',
					'动态被赞'
				],
				TabCur: 0,
				dataList: [],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					textNoMore: config.customNoMore,
					noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '还没收到点赞'
					}
				}
			}
		},
		onLoad(options) {
			if(options.postPraiseCount !== null && options.postPraiseCount !== undefined) {
				this.unreadPostPraiseCount = options.postPraiseCount
			}
			if(options.activePraiseCount !== null && options.activePraiseCount !== undefined) {
				this.unreadActivePraiseCount = options.activePraiseCount
			}
		},
		methods: {
			jumpToActiveDetail(postId) 
			{
				uni.navigateTo({
					url: '/pages/lessuse/active-list/active-list?postId=' + postId
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				if(this.TabCur == 1) {
					this.unreadPostPraiseCount = 0
				}
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if (this.mescroll) {
					this.mescroll.triggerDownScroll()
				}
			},
			jumpToPost(postId) {
				uni.navigateTo({
					url: '/pages/detail/detail?postId=' + postId
				})
			},
			jumpToProfile(userId) {
				uni.navigateTo({
					url: '/pages/profile/profile?userId=' + userId
				})
			},
			jumpToDetail(commentId) {
				uni.navigateTo({
					url: '/pages/always/comment-detail/comment-detail?commentId=' + commentId
				})
			},
			getDataList(pageIndex, pageSize) {
				if (this.TabCur == 0) {
					getCommentPraiseList(pageIndex, pageSize).then(res => {
						res.data.list.forEach(item => {
							item.show_time = getTimeDistance(item.created_at)
						})
						let pageList = res.data.list
						let listCount = pageList.length
						if (pageIndex == 0) {
							this.dataList = res.data.list
						} else {
							this.dataList = this.dataList.concat(res.data.list)
						}
						console.log('page length:' + pageList.length)
						let hasNext = pageList.length >= pageSize
						let unreadIds = res.data.id_list
						if (unreadIds.length > 0) {
							markCommentPraiseRead(unreadIds).then(res => {
								console.log('点赞阅读成功')
							}).catch(error => {
								console.log('点赞阅读失败')
							})
						}
						if (this.mescroll) {
							this.mescroll.endSuccess(pageList.length, hasNext);
						}
					}).catch(error => {
						if (this.mescroll) {
							this.mescroll.endErr()
						}
					})
				} else if(this.TabCur == 1) {
					getPostPraiseList(pageIndex, pageSize).then(res => {
						res.data.list.forEach(item => {
							item.show_time = getTimeDistance(item.created_at)
						})
						let pageList = res.data.list
						let listCount = pageList.length
						if (pageIndex == 0) {
							this.dataList = res.data.list
						} else {
							this.dataList = this.dataList.concat(res.data.list)
						}
						console.log('page length:' + pageList.length)
						let hasNext = pageList.length >= pageSize
						let unreadIds = res.data.id_list
						if (unreadIds.length > 0) {
							markPostPraiseRead(unreadIds).then(res => {
								console.log('点赞阅读成功')
							}).catch(error => {
								console.log('点赞阅读失败')
							})
						}
						if (this.mescroll) {
							this.mescroll.endSuccess(pageList.length, hasNext);
						}
					}).catch(error => {
						if (this.mescroll) {
							this.mescroll.endErr()
						}
					})
				}else{
					getActivePraiseList(pageIndex, pageSize).then(res => {
						res.data.list.forEach(item => {
							item.show_time = getTimeDistance(item.created_at)
						})
						let pageList = res.data.list
						let listCount = pageList.length
						if (pageIndex == 0) {
							this.dataList = res.data.list
						} else {
							this.dataList = this.dataList.concat(res.data.list)
						}
						console.log('page length:' + pageList.length)
						let hasNext = pageList.length >= pageSize
						let unreadIds = res.data.id_list
						if (unreadIds.length > 0) {
							markPostPraiseRead(unreadIds).then(res => {
								console.log('点赞阅读成功')
							}).catch(error => {
								console.log('点赞阅读失败')
							})
						}
						if (this.mescroll) {
							this.mescroll.endSuccess(pageList.length, hasNext);
						}
					}).catch(error => {
						if (this.mescroll) {
							this.mescroll.endErr()
						}
					})
				}
			},
			downCallback() {
				if (this.mescroll) {
					this.mescroll.resetUpScroll()
				}
			},
			upCallback(page) {
				let pageIndex = page.num - 1
				this.lastReportId = null
				this.getDataList(pageIndex, page.size)
			},
			ViewImage(e) {
				console.log(e.currentTarget.dataset.list)
				console.log(e.currentTarget.dataset.url)
				uni.previewImage({
					urls: e.currentTarget.dataset.list,
					current: e.currentTarget.dataset.url
				});
			}
		},
	}
</script>

<style scoped>

</style>
